সিএসএসের মাধ্যমে একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপনের জন্য সবচেয়ে বেশি ব্যবহৃত এবং গুরুত্বপূর্ন প্রোপার্টি হলো display প্রোপার্টি।
 

এক নজরে সিএসএস display এবং visibility প্রোপার্টি

display

এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা উল্লেখ করে।

visibility

এইচটিএমএল এলিমেন্টটি দৃশ্যমান হবে কিনা তা উল্লেখ করে।

display প্রোপার্টির ব্যবহার

একটি এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা display প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এলিমেন্টের ধরনের উপর ভিত্তি করে অধিকাংশ এইচটিএমএল এলিমেন্টেরই একটি ডিফল্ট display ভ্যালু রয়েছে। অধিকাংশ এলিমেন্টের ডিফল্ট ভ্যালু হলো inline অথবা block।

এইচটিএমএল ইনলাইন এলিমেন্ট

একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং যতটুকু দৈর্ঘ্য প্রয়োজন ততটুকুই নেয়।

এটি একটি প্যারাগ্রাফ এলিমেন্ট। এই প্যারাগ্রাফের মধ্যে ইনলাইন <span> এলিমেন্ট রয়েছে।

কয়েকটি ইনলাইন এলিমেন্ট নিম্নে দেখানো হলোঃ

• <a>
• <span>
• <img>
• <input>

kt_satt_skill_example_id=745

এইচটিএমএল ব্লক-লেভেল এলিমেন্ট

এইচটিএমএল ব্লক-লেভেল(block-level) এলিমেন্ট সবসময়ই একটি নতুন লাইন দিয়ে শুরু হয় এবং এর কন্টেইনারের বাম পাশ থেকে ডান পাশ পর্যন্ত সম্পূর্ণ অংশ দখল করে।

এটি একটি <div> এলিমেন্ট, যা একটি ব্লক লেভেল এলিমেন্ট।

কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ

• <div>
• <h1> - <h6>
• <p>
• <ul>
• <form>
• <li>
• <header>
• <footer>
• <article>
• <section>

kt_satt_skill_example_id=746

এলিমেন্টের ডিফল্ট display ভ্যালু পরিবর্তন

আমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- inline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।

এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না।

হরিজন্টাল মেনুবার তৈরি করার জন্য < li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।

kt_satt_skill_example_id=747

বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।

নিচের উদাহরণে < span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ

kt_satt_skill_example_id=749

নিচের উদাহরণে < a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃ

kt_satt_skill_example_id=752

display: none; এর ব্যবহার

একটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে display: none; প্রোপার্টি ব্যবহার করা হয়।

< script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।

kt_satt_skill_example_id=754

এলিমেন্টকে সুপ্ত অবস্থায় রাখা

এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু display: none; অথবা visibility:hidden ব্যবহার করতে হয়।

display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।

kt_satt_skill_example_id=756